<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
String path = request.getContextPath();
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<base href="<%=basePath%>"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
  
  
</head>
<body>
<style type="text/css">
	 .mi-slider img{
        box-shadow:15px 5px 10px #666;
     }
     #discountGood img{
        border:6px rgba(100,100,100,0.5) solid;
		height:200px;
		border-radius:10px;
		background-color:rgba(175,175,175,0.5);
		box-shadow:15px 5px 10px #666;
		overflow:hidden;
     }
     #goods img{
        position: relative;
        display: inline-block;
        -webkit-transition: all 0.4s linear;
        border:4px rgba(175,175,175,0.8) solid;
        border-radius:20px;
		background-color:rgba(175,175,175,0.5);
		overflow:hidden;
     }
     #goods img:HOVER {
        -webkit-transform: scale(0.95);
     }
</style>

<jsp:include page="/WEB-INF/jsp/front/header.jsp"/>

<!-- ========== SLIDER START ========== -->

<section id="slider">
	<div id="bs-carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
      <li data-target="#bs-carousel" data-slide-to="1"></li>
      <li data-target="#bs-carousel" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active"><a href="#"><img src="/zzbinGood/fm1.jpg" alt=""></a></div>
      <div class="item"><a href="#"><img src="/zzbinGood/fm4.jpg" alt=""></a></div>
      <div class="item"><a href="#"><img src="/zzbinGood/fm3.jpg" alt=""></a></div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#bs-carousel" data-slide="prev">
      <i class="fa fa-angle-left"></i>
      <!--span class="glyphicon glyphicon-chevron-left"></span-->
    </a>
    <a class="right carousel-control" href="#bs-carousel" data-slide="next">
      <i class="fa fa-angle-right"></i>
      <!--span class="glyphicon glyphicon-chevron-right"></span-->
    </a>
  </div>
	<h2 style="margin-left: 355px;">最新商品<span style="float: right;font-size: 20px;margin-top: 5px;margin-right: 360px;"><a href="model/goodManyTerm">>>>更多</a></span></h2>
    <div id="mi-slider" class="mi-slider">
      <ul>
	      <c:forEach items="${goodType1 }" var="goodType">
	          <li><a href="good/goodDetails?gid=${goodType.gid}"><img src="/zzbinGood/${goodType.gpicpath}" alt="" style="width: 280px;height: 280px;"><h4 style="color: #FD638F;">${goodType.gname}</h4></a></li>
	      </c:forEach>
      </ul> 
      <ul>
          <c:forEach items="${goodType2 }" var="goodType">
	          <li><a href="good/goodDetails?gid=${goodType.gid}"><img src="/zzbinGood/${goodType.gpicpath}" alt="" style="width: 280px;height: 280px;"><h4 style="color: #FD638F;">${goodType.gname}</h4></a></li>
	      </c:forEach>
      </ul>
      <ul>
          <c:forEach items="${goodType3 }" var="goodType">
	          <li><a href="good/goodDetails?gid=${goodType.gid}"><img src="/zzbinGood/${goodType.gpicpath}" alt="" style="width: 280px;height: 280px;"><h4 style="color: #FD638F;">${goodType.gname}</h4></a></li>
	      </c:forEach>
	  </ul>
      <nav>
        <a href="#">运动装</a>
        <a href="#">休闲装</a>
        <a href="#">职业装</a>
      </nav>
    </div>
</section>

<!-- ========== SLIDER END ========== -->

<!-- ========== CONTENT START ========== -->

<section id="content">
  <div class="container">
	<h2>限时活动<span style="float: right;font-size: 20px;margin-top: 5px;"><a href="#">>>>更多</a></span></h2>
	
	<!-- <h3 align="right"><a href="#">>>>更多</a></h3> -->
    <div class="row ad-banners">  
      <div class="col-sm-4">
        <a href="#"><img src="/zzbinGood/timg1.jpg" alt=""></a>
        <a href="#"><img src="/zzbinGood/timg2.jpg" alt=""></a>
      </div>
      <div class="col-sm-4">
        <a href="#"><img src="/zzbinGood/timg5.jpg" alt=""></a>
        <a href="#"><img src="/zzbinGood/timg4.jpg" alt=""></a>
      </div>
      <div class="col-sm-4">
        <a href="#"><img src="/zzbinGood/timg3.jpg" alt=""></a>
        <a href="#"><img src="/zzbinGood/timg6.jpg" alt=""></a>
      </div>
    </div>
    <h2>疯狂让利<span style="float: right;font-size: 20px;margin-top: 5px;"><a href="#">>>>更多</a></span></h2>
    <div class="products-carousel products-small products">
    
      <div class="banner">
        <img src="img/images/30-off.png" alt="">
      </div>

      <div class="carousel">
       <c:forEach items="${Discounts}" var="Discount">
        <div id="discountGood">
          <div class="product">
            <div class="thumbnail">
              <a href="good/goodDetails?gid=${Discount.gid}"><img src="/zzbinGood/${Discount.gpicpath}" style="width: 204px;height: 204px;" alt=""></a>
            </div>
            <hr>
            <div class="title">
              <h3 style="font-size: 10px;"><a href="#">${Discount.goodType.tdesc}</a></h3>
              <p>折扣-<span style="color:red;">${Discount.discount}</span>-&amp;价格-<span style="color:red;">${Discount.price}</span>-</p>
            </div>
          </div>
        </div> 
       </c:forEach> 
      </div>
    </div>

    <h2>商品展示<span style="float: right;font-size: 20px;margin-top: 5px;"><span style="float: right;font-size: 20px;margin-top: 15px;"><a href="good/goodOneTerm">>>>更多</a></span></h2>
    <div class="gap-25"></div>

    <ul class="products row">
	 <c:forEach items="${showAlls}" var="showAll">
      <li class="col-sm-3">
        <div class="product" id="goods">
          <div class="thumbnail">
            <a href="good/goodDetails?gid=${showAll.gid}"><img src="/zzbinGood/${showAll.gpicpath}" style="width: 263px;height: 388px;" alt=""></a>
            <a href="#" class="add-to-cart" title="Add to Cart">
              <span class="fa-stack fa-2x">
                <i class="fa fa-circle fa-stack-2x"></i>
                <i class="fa fa-shopping-cart  fa-stack-1x fa-inverse"></i>
              </span>
            </a>
          </div>
          <hr>
          <div class="title">
            <h3 style="font-size: 12px;" id="showAllcss"><a href="#">${showAll.gname}</a></h3>
            <p>收藏-<span style="color: red;">${showAll.collection}</span>-&amp;销量-<span style="color: red;">${showAll.sales}</span>-</p>
          </div>
          <span class="price">$${showAll.price}</span>
        </div>
      </li>
	 </c:forEach>
    </ul>
    
  </div>
</section>

<!-- ========== CONTENT END ========== -->

<jsp:include page="/WEB-INF/jsp/front/leftCar.jsp"/>



</body>
</html>
